<template>
  <card ref="Card">
    <go-back @back="back" content="问题件详情"/>
    <el-form label-width="120px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="订单号:">{{formData.number}}</el-form-item>
          <el-form-item label="寄件人姓名:">{{formData.senderName}}</el-form-item>
          <el-form-item label="收件人姓名:">{{formData.receiverName}}</el-form-item>
          <el-form-item label="当前网点:">{{operation.currentName}}</el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="创建日期:">{{formData.updateTime | formatDateTime}}</el-form-item>
          <el-form-item label="寄件人联系电话:">{{formData.senderPhone}}</el-form-item>
          <el-form-item label="收件人联系电话:">{{formData.receiverPhone}}</el-form-item>
          <el-form-item label="问题描述:">{{operation.notes}}</el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form :model="form" :rules="rules" ref="Form" label-width="120px">
      <row-col>
        <el-form-item label="网点充值/扣除:" prop="price" slot="r">
          <el-input-number v-model="form.price" controls-position="right" :precision="2" :min="0"/>
          <el-button type="primary" @click="addMoney" class="ml-10">充值</el-button>
          <el-button type="danger" @click="reduceMoney">扣除</el-button>
        </el-form-item>
      </row-col>
      <row-col>
        <el-form-item slot="r" label="处理说明:" prop="notes">
          <el-input v-model="form.notes"></el-input>
        </el-form-item>
      </row-col>
    </el-form>
    <el-table :data="fundRecords" class="mb-20">
      <el-table-column prop="notes" label="处理说明"/>
      <el-table-column prop="createTime" label="处理日期">
        <template slot-scope="scope">
          <span>{{scope.row.createTime | formatDateTime}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-form v-if="feedBack && feedBack.content">
      <el-form-item label="申述内容:"/>
      <div v-html="feedBack.content"></div>
    </el-form>
    <div slot="footer">
      <submit-button ref="Submit" @submit="submit" text="完 成" type="success"/>
    </div>
  </card>
</template>

<script>
  import {getProblemOperationApi, addProblemPriceApi, delProblemPriceApi, problemSuccessApi} from '@/api/fund'
  import {resetForm} from "@/utils/common";

  export default {
    name: "Detail",
    props: {
      tab: {
        required: true,
        type: Boolean
      }
    },
    data() {
      return {
        id: null,
        formData: {},
        fundRecords: [],
        feedBack: {},
        operation: {},
        form: {
          operationId: null, // 运营信息id
          price: null, // 金额
          notes: '' // 处理说明
        },
        rules: {
          price: {required: true, message: '请输入金额', trigger: 'change'},
          notes: {required: true, message: '请输入处理说明', trigger: 'blur'}
        }
      }
    },
    methods: {
      // 获取数据
      getData() {
        this.$refs.Card.start()
        getProblemOperationApi({id: this.id}).then(result => {
          let response = result.resultParam
          this.formData = response.expressOrder
          this.fundRecords = response.fundRecordsList
          this.feedBack = response.feedBack
          this.operation = response.operation
          this.$refs.Card.stop()
        })
      },
      // 提交
      submit() {
        this.$refs.Submit.start();
        problemSuccessApi({operationId: this.id})
          .then(() => {
            this.$refs.Submit.stop();
            this.back()
          })
          .catch(() => {
            this.$refs.Submit.stop();
          })
      },
      // 充值
      addMoney() {
        this.$refs['Form'].validate((valid) => {
          if (!valid) return false;
          let data = {...this.form};
          data.operationId = this.id;
          this.$msgBox('确认充值？').then(() => {
            this.$refs.Card.start();
            addProblemPriceApi(data)
              .then(() => {
                resetForm(this, 'form')
                this.getData()
                this.$refs.Card.stop();
              })
              .catch(() => {
                this.$refs.Card.stop();
              })
          })
        });
      },
      // 扣除
      reduceMoney() {
        this.$refs['Form'].validate((valid) => {
          if (!valid) return false;
          let data = {...this.form};
          data.operationId = this.id;
          this.$msgBox('确认扣除？').then(() => {
            this.$refs.Card.start();
            delProblemPriceApi(data)
              .then(() => {
                resetForm(this, 'form')
                this.getData()
                this.$refs.Card.stop();
              })
              .catch(() => {
                this.$refs.Card.stop();
              })
          })
        });
      },
      // 返回
      back() {
        resetForm(this)
        this.$emit('update:tab', !this.tab)
        this.$emit('update')
      }
    }
  }
</script>
